<nz-spin [nzSpinning]="isSpinning">
    <nz-card nzType="inner" nzTitle="Windows Forward Config" [nzExtra]="winForwardExtraTemplate">
        <nz-table #nzTable nzSize="small" [(nzData)]="winForwardList">
            <thead>
                <tr>
                    <th [nzSortFn]="winIpSortFn">WinIp</th>
                    <th>WinUser</th>
                    <th>WinPass</th>
                    <th>WinPort</th>
                    <th>ForwardIp</th>
                    <th>ForwardPort</th>
                    <th>Comment</th>
                    <th [nzWidth]="'85px'">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of nzTable.data; let i=index" [ngClass]="{'row-selected':selectedIndex === i}" (click)='click(i)' (dblclick)='openHistory(history)'>
                    <ng-container *ngIf="!editCache[i].edit; else editTemplate">
                        <td>{{ item.winip }}</td>
                        <td>{{ item.winuser }}</td>
                        <td>{{ item.winpass }}</td>
                        <td>{{ item.winport }}</td>
                        <td>{{ item.ip }}</td>
                        <td>{{ item.port }}</td>
                        <td>{{ item.comment }}</td>
                        <td>
                            <a (click)="startEdit(i)" title="Edit"><i nz-icon nzType="edit"></i></a>
                            <a (click)="delete(i)" title="Delete"><i nz-icon nzType="delete"></i></a>
                            <a (click)="startForward(i)" title="Start Forward"><i nz-icon nzType="play-circle"></i></a>
                        </td>
                    </ng-container>
                    <ng-template #editTemplate>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].winip" /></td>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].winuser" /></td>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].winpass" /></td>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].winport" /></td>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].ip" /></td>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].port" /></td>
                        <td><input type="text" nz-input [(ngModel)]="editCache[i].comment" /></td>
                        <td>
                            <a (click)="saveEdit(i)" title="Save"><i nz-icon nzType="save"></i></a>
                            <a (click)="cancelEdit(i)" title="Cancel"><i nz-icon nzType="rollback"></i></a>
                        </td>
                    </ng-template>
                </tr>
            </tbody>
        </nz-table>
        <ng-template #winForwardExtraTemplate>
            <button nz-button (click)="add()"><i nz-icon nzType='plus'></i>Add</button>
        </ng-template>
    </nz-card>
</nz-spin>